{% extends 'nav.html' %}
{% block title %}酒店财务{% endblock title %}
{% block style %}
    <style>
        #nav ul .hotelmoney {
            background: linear-gradient(90deg, rgba(71, 137, 255, 1) 0%, rgba(71, 137, 255, 1) 2%, rgba(71, 137, 255, 0.47) 3%, rgba(71, 137, 255, 0.1) 56%, rgba(36, 69, 128, 0) 100%);
            border-radius: 3px;
        }

        #user {
            float: right;
            margin-right: 58px;
        {#margin-left: 1300px;#} display: inline-block;
        }

        .usertype, .usertype:active, .usertype:hover, .usertype:visited {
            width: 59px;
            height: 21px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 21px;
            color: rgba(191, 191, 191, 1);
            opacity: 1;
            text-decoration: none;
            margin-left: 41px;
            margin-right: 37px;
        }

        .tabs {
            float: left;
            margin-top: 47px;
        }

        .tab1 {
            width: 213px;
            height: 67px;
            background: rgba(255, 255, 255, 1);
            opacity: 1;
            float: left;
            margin-bottom: -16px;
        }

        .tab1 a {
            font-size: 19px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 25px;
            color: rgba(71, 137, 255, 1);
            opacity: 1;
            margin-top: 15px;
            margin-left: 40px;
            float: left;
        }

        .tab2 {
            width: 156px;
            height: 51px;
            background: rgba(242, 243, 248, 1);
            opacity: 1;
            border-radius: 5px;
            float: left;
            margin-left: 17px;
        }

        .tab2 a {
            font-size: 19px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 25px;
            color: rgba(191, 191, 191, 1);
            opacity: 1;
            margin-top: 15px;
            margin-left: 40px;
            float: left;
        }

        .usertable {
            padding-top: 28px;
            padding-left: 5px;
            padding-right: 5px;
            background: #FFFFFF;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.01);
            overflow: auto;
            width: 1525px;
        }

        table {
            border-collapse: separate;
            white-space: nowrap;
            width: 100%;
        }

        table thead {
            width: 100%;
            height: 51px;
            background: rgba(244, 247, 251, 1);
            opacity: 1;
            border-radius: 7px;
        }

        table tr:first-child th:first-child {
            border-top-left-radius: 7px;
            border-bottom-left-radius: 7px;
        }

        table tr:first-child th:last-child {
            border-top-right-radius: 7px;
            border-bottom-right-radius: 7px;
        }

        table th {
            text-align: center;
            font-size: 17px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 38px;
            opacity: 1;
            color: #9EADC5;
        }

        table td {
            text-align: center;
            /*width: 24px;*/
            height: 53px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 40px;
            color: rgba(77, 98, 130, 1);
            opacity: 1;
        }

        .right {
            position: absolute;
            left: 307px;
            top: 35px;
        }
    </style>
{% endblock %}

{% block js %}
    <script type="text/javascript">

        function hover(x) {
            x.style.background = "rgba(244,247,251,0.5)";
        }

        function dishover(x) {
            x.style.background = "#FFFFFF"
        }
    </script>
{% endblock %}

{% block hotelmoney %}{% endblock %}

{% block body %}
    <div class="right">
        <!-- 用户 -->
        <div id="user">
            <img src="../../static/image/index/帮助.png" style="margin-bottom: 9px"/>
            <img src="../../static/image/index/通知.png" style="margin-left:36px;margin-bottom: 9px"/>
            <img src="../../static/image/index/图像 2.png"
                 style="width:40px;height:40px;background:rgba(255,255,255,1);border-radius:50%;opacity:1;margin-left:28px;justify-content:center;overflow:hidden;align-items: center;"/>
            <img src="../../static/image/index/路径 1146@2x.png" style="width:7px;margin-left:12px;margin-bottom: 15px "/>
        </div>

        <div class="tabs">
            <div class="tab1">
                <a>财务预算汇总表</a>
            </div>
            <div class="tab2">
                <a>财务预算</a>
            </div>
            <div class="tab2">
                <a>财务报表</a>
            </div>
            <div class="tab2">
                <a>预算审核</a>
            </div>

        </div>
        <!--预算表单-->
        <div class="usertable">
            <!--    预算类型切换-->
            <div>
                <a href="#" class="usertype" style="color: rgba(45,52,68,1)">月度预算汇总表</a>
                <a href="#" class="usertype">年度预算汇总表</a>
            </div>
            <!--    查询框-->
            <div style="float:left;margin-left:30px;margin-top:35px;margin-right:600px;padding-right:2px;width:206px;height:32px;border:1px solid rgba(228,228,228,1);opacity:1;border-radius:16px;">
                <img src="../../static/image/user/search.png"
                     style="width: 16px;margin-left: 10px;float: left;margin-top:8px;margin-right: 3px;"/>
                <input type="text" value="成本预算" onclick="clearvalue(this)" onblur="defaultvalue(this)"
                       style="height: 30px;width: 120px;border: none;outline: none;color: #E4E4E4;padding: 0px;">
                <a href="#"
                   style="float:right;margin-top:3px;width:41px;height:26px;background:rgba(239,240,245,1);opacity:1;border-radius:18px;">
                    <img src="../../static/image/index/backstagesettings(1).png"
                         style="width: 16px;margin-left: 13px;margin-top:4px;"/>
                </a>
            </div>
            <script>
                function clearvalue(x) {
                    x.value = "";
                }

                function defaultvalue(x) {
                    if (x.value == "") {
                        x.value = "成本预算";
                    }
                }
            </script>

            <!--    用户添加-->
            <a class="mdui-btn mdui-btn-raised mdui-ripple mdui-text-color-white-text" href="/smdo/add"
               style="float:right;margin-top:31px;margin-bottom:33px;margin-right:32px;width:139px;height:45px;background:rgba(71,137,255,1);opacity:1;border-radius:23px;text-decoration: none;">
                <i class="mdui-icon material-icons mdui-icon-left " style="font-size: 25px;margin-top: 5px">&#xe145;</i>
                <div style="width:48px;height:16px;font-size:15px;font-family:Microsoft YaHei;font-weight:400;line-height:16px;color:rgba(255,255,255,1);opacity:1;margin-top: 14px;">
                    添加预算
                </div>
            </a>

            <table id="table" cellspacing="0" cellpadding="0">
                <thead>
                <tr>
                    <th style="width: 113px">部门</th>
                    <th style="width: 105px">项目</th>
                    {% for i in "i"|rjust:12 %}
                        <th style="width: 85px">{{ forloop.counter }}月</th>
                    {% endfor %}
                    <th style="width: 100px;">总计</th>
                    <th colspan="2" >单位(万元)</th>
                </tr>
                <tr style="height: 13px"></tr>
                </thead>
                <tbody>
                {% for finance in finance_record %}
                    <tr onmouseover="hover(this);" onmouseout="dishover(this);">
                        <td>{{ finance.department }}</td>
                        <td>{{ finance.project }}</td>
                        {% for month_finance in finance.finance %}
                            <td>{{ month_finance.money }}</td>
                        {% endfor %}
                        <td>{{ finance.sum }}</td>
                        <td style="width: 20px">
                        <a href="/fdo/update{{ '#' }}">
                            <img src="/static/image/staff/edit.png" style="width: 20px"/>
                        </a>
                        </td>
                        <td style="width: 20px">
                            <a href="/fdo/delete{{ '#' }}">
                                <img src="/static/image/staff/delete.png" style="width: 20px"/>
                            </a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <script src="//www.mdui.org/source/dist/js/mdui.min.js"></script>
    </div>
{% endblock %}